<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<script type="text/javascript">

var data = {};
data.week = [27,27,27,27,27,27,27];
data.label = [];
data.specificLabels = [];
data.starts    = [];
$(function(){
	$.ajax({
	    url: "${pageContext.request.contextPath}/WorkSchedule/getWSJSON.html",
	    method: 'GET',
	    dataType: 'json',
	    success: function(result){
		    	$.each(result.rows,function(index,name){
		    		$.each(name.specificLables,function(index,ispecificLables){
		    			data.specificLabels.push(ispecificLables.substring(ispecificLables.indexOf('/')+1));
		    			
		    		});
		    		data.ends = name.end;
		    		data.starts = name.start;
		    		data.lable = name.lable;
				});
		    	draw();
	
		    	
		       
	    }
	});
    
	 $('#week').datebox();
	//获取所有门店
	 $.ajax({  
		   type: "POST",  
		   url: "shop/getAllShopJson.html",  
		   dataType:"json",  
		   success: function(json){  
		     $("#selshopId2").combobox({  
		        data:json.rows,  
		        valueField:'shopId',  
		        textField:'shopName'
		     });
		   }
		}); 

	 
	 $("#searchWS").click(function(){
		 $('#searhWSfm').form('submit',{
			 success: function(result){
				 var result = eval('('+result+')');
				 $.each(result.rows,function(index,name){
			    		$.each(name.specificLables,function(index,ispecificLables){
			    			data.specificLabels.push(ispecificLables.substring(ispecificLables.indexOf('/')+1));
			    			
			    		});
			    		data.ends = name.end;
			    		data.starts = name.start;
			    		data.lable = name.lable;
					});
					 RGraph.Clear(document.getElementById('cvs'));
			    	draw();
			 	}
			 });
	 });
});


function draw() {
	var weekBar = new RGraph.Bar('cvs',data.week)
    .Set('gutter.left', 20)
    .Set('colors', ['rgba(0,0,0,0.5)'])
 	.Set('ymax',28)
 	.Set('labels',['周日','周一','周二','周三','周四','周五','周六'])
 	.Draw();

	 var nameBar = new RGraph.Bar('cvs',data.lable)		
	.Set('ymax', weekBar.scale2.max)
     .Set('gutter.left', weekBar.Get('gutter.left'))
     .Set('colors', ['rgba(255,250,250,0.4)'])
     .Set('noaxes', true)
     .Set('hmargin', 10)
     .Set('ylabels', false)
		.Set('chart.labels.above.specific',data.specificLabels)	
     .Set('background.grid', false)
     .Draw();
	 
	 
	var endBar = new RGraph.Bar('cvs', data.ends)
     .Set('ymax', nameBar.scale2.max)
     .Set('gutter.left', nameBar.Get('gutter.left'))
     .Set('colors', ['rgba(255,228,196,1.0)'])
     .Set('noaxes', true)
     .Set('labels.above', true)
		.Set('labels.above.decimals', 2)
     .Set('hmargin', 10)
     .Set('ylabels', false)
     .Set('background.grid', false)
     .Set('key', ['下班时间','上班时间','员工'])
     .Set('key.position', 'gutter') 
     .Set('key.colors',  ['rgba(255,228,196,1.0)','white','rgba(255,250,250,0.4)'])
     .Set('key.position.gutter.boxed', true)
     .Set('chart.key.background',['rgba(0,0,0)'])
     .Set('chart.key.text.color',['white','white','white'])
     .Set('chart.key.position.x',2)
     .Set('chart.key.position.y',15)
     .Draw();
		
	new RGraph.Bar('cvs', data.starts)
     .Set('ymax', endBar.scale2.max)
     .Set('gutter.left', endBar.Get('gutter.left'))
     .Set('colors', ['white'])
     .Set('noaxes', true)
     .Set('labels.above', true)
		.Set('labels.above.decimals', 2)
     .Set('hmargin', 20)
     .Set('ylabels', false)
     .Set('key.position', 'gutter')     
     .Set('background.grid', false)
     .Draw();
}

</script>
<div style="width: auto; height: 30px; border: 1px solid #ddd; padding-top: 5px;">
	<form  id="searhWSfm" method='post' action="${pageContext.request.contextPath}/WorkSchedule/getWSJSON.html">
		<label>门店:</label>
		<select name="selshopId2" id="selshopId2" class="easyui-combobox"  data-options="editable:false">
		</select>
		<label>选择查询周:</label>
		<input name="startWeek" id="week"></input>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" id="searchWS">查询</a>	
	</form>
</div>
  <canvas id="cvs" width="3000" height="400" !style="border: 1px solid gray;">[No canvas support]</canvas>